<template>
  <el-dialog v-model="visible" :close-on-click-modal="false" :title="mainTitleName()" :width="700" destroy-on-close
             @closed="$emit('closed')">
    <el-form ref="dialogForm" :disabled="mode=='show'" :model="form" :rules="rules" label-position="right"
             label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="专题名称" prop="title">
            <el-input v-model="form.title" :maxlength="200" clearable placeholder="请输入专题名称"
                      show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="专题要点" prop="detail">
            <scEditor
                v-model="form.detail"
            ></scEditor>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="0">启用</el-radio>
              <el-radio :label="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort"  clearable placeholder="请输入排序编号"
                      show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visible=false">取 消</el-button>
      <el-button v-if="mode!='show'" :loading="isSaveing" type="primary" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>

<!--  <scDialog v-model="play.status" :title="play.type == 1 ? '查看音频' : '查看视频'" :width="800">-->
<!--    <div style="display: flex; align-items:center;justify-content: center;">-->
<!--      <video v-if="play.type == 2" ref="videoControls" :src="play.src" controls-->
<!--             style="width: 100%; height: 400px; background:#000;"></video>-->
<!--      <audio v-else ref="audioControls" :src="play.src" controls style="width: 100%;"></audio>-->
<!--    </div>-->
<!--    <template #footer>-->
<!--      <el-button @click="closePlay(play.type)">取 消</el-button>-->
<!--    </template>-->
<!--  </scDialog>-->

</template>

<script>
import scAudioButton from '@/components/scUpload/audio_button.vue'
import {defineAsyncComponent} from "vue";
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'))
export default {
  emits: ['success', 'closed'],
  components: {
    scAudioButton,
    scEditor
  },
  props: {
    mainName: {
      type: String,
      default: () => {
        return '语法库'
      }
    },
  },
  data() {
    return {
      mode: "add",
      course: null,
      visible: false,
      isSaveing: false,
      form: this.getDefaultRuleForm(),
      rules: {
        title: [
          {required: true, message: '请输入专题名称'},
        ],
        detail: [
          {required: true, message: '请输入专题要点'},
        ],
        sort: [
          {required: true, message: '请输入排序编号'},
        ],
      },
      play: {
        src: '',
        type: 1,
        status: false
      },
      voiceFiles: [],
      translationVoiceFiles: []
    }
  },
  mounted() {

  },
  methods: {
    //显示
    open(mode = 'add', course) {
      this.mode = mode;
      this.visible = true;
      this.course = course
      this.form.course_id = course.id
      return this
    },
    //表单提交方法
    async submit() {
      if (!await this.$refs.dialogForm.validate().catch(() => {
        return false
      })) {
        return false
      }

      let _data = this.form
      try {
        this.isSaveing = true;
        if (this.form.id) {
          await this.$API.course.grammarS.action.PUT(_data)
        } else {
          await this.$API.course.grammarS.action.POST(_data)
        }

        this.$emit('success')
        this.visible = false;
        this.$notify.success("保存成功")
      } finally {
        this.isSaveing = false;
      }
    },
    //表单注入数据
    setData(data) {
      let _form = {
        id: data.id,
        detail: data.detail,
        vedio: data.vedio,
        course_id: this.course ? this.course.id : '',
        status: data.status ? parseInt(data.status) : 0,
        title: data.title ? data.title : '',
        sort: data.sort ? data.sort : '',
        type: data.type ? data.type : 0,
      };

      this.form = _form
    },
    getDefaultRuleForm() {
      return {
        id: null,
        course_id: '',
        detail: '',
        vedio: [],
        status: 0,
        title:'',
        sort:'',
        type:0,
      }
    },
    mainTitleName() {
      let titleName = '';
      if (!this.form.id && this.course) {
        titleName = `添加【${this.course.name}】${this.mainName}`;
      } else if (!this.form.id) {
        titleName = `新增${this.mainName}`;
      } else {
        titleName = `编辑${this.mainName}`;
      }
      return titleName;
    },
    setAttrFile(file, type) {
      if (type == 'voice') {
        this.voiceFiles.push({
          name: file.name,
          path: file.path,
          url: file.url,
          tempImg: file.tempImg
        })
        this.form.voiceFile = file.url
      } else if (type == 'translationVoice') {
        this.translationVoiceFiles.push({
          name: file.name,
          path: file.path,
          url: file.url,
          tempImg: file.tempImg
        })
        this.form.translationVoiceFile = file.url
      }
    },
    //点击标签前往预览
    previewAttrFileItem(e, index, type) {
      if (type == 'voice') {
        let url = this.voiceFiles[index].tempImg
        this.canPlay(url, 1)
      } else if (type == 'translationVoice') {
        let url = this.translationVoiceFiles[index].tempImg
        this.canPlay(url, 1)
      } else {
        window.open(url)
      }
    },
    //移除单个文件
    delAttrFileItem(e, index, type) {
      if (type == 'voice') {
        this.voiceFiles.splice(index, 1)
      } else if (type == 'translationVoice') {
        this.translationVoiceFiles.splice(index, 1)
      }
    },
    getFileName(o) {
      var pos = o.lastIndexOf("/")
      return o.substring(pos + 1);
    },
    canPlay(url, type) {
      this.play.status = true
      this.play.type = type
      this.play.src = url

      this.$nextTick(() => {
        if (this.$refs.audioControls) {
          this.$refs.audioControls.load()
          this.$refs.audioControls.play()
        }
        this.$refs.videoControls && this.$refs.videoControls.load()
      })
    },
    closePlay(type) {
      if (type == 1) {
        this.$refs.audioControls && this.$refs.audioControls.pause()
      } else if (type == 2) {
        this.$refs.videoControls && this.$refs.videoControls.pause()
      }
      this.play.status = false
    }
  }
}
</script>

<style>
</style>
